<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script th:src="@{vendor/purecounter/purecounter.js}"></script>
    <script th:src="@{vendor/aos/aos.js}"></script>
    <script th:src="@{vendor/bootstrap/js/bootstrap.bundle.min.js}"></script>
    <script th:src="@{vendor/bootstrap/js/bootstrap.js}"></script>
    <script th:src="@{vendor/glightbox/js/glightbox.min.js}"></script>
    <script th:src="@{vendor/isotope-layout/isotope.pkgd.min.js}"></script>
<!--    <script th:src="@{vendor/swiper/swiper-bundle.min.js}"></script>-->
    <script th:src="@{vendor/php-email-form/validate.js}"></script>
    <script th:src="@{vendor/jq/jquery-3.4.1.js}"></script>
    <style>
        .demoContainer{
            display: flex;
            background-color: #f3f5f6;
            flex-direction: column;
            align-items: center;
        }
        .demoContainer h1 ,.pain h1 ,.func h1{
            font-size: 35px;
            font-weight: bold;
            text-transform: uppercase;
            position: relative;
            color: #3a3939;
            border-bottom-style: solid;
            border-bottom-color: #5ea8f1;
            border-bottom-left-radius: 2px;
            border-bottom-right-radius: 2px;
            border-bottom-width: 5px;
        }
        .box{
            /*margin-top: 20px;*/
            display: flex;
            width: 100%;
            background-color: #fff;
            flex-direction: column;
            align-items: center;
        }
        .box-item{
            background-color: #f6eed7;
            display: flex;
            flex-direction: row;
            justify-content: center;
            flex-wrap: wrap;
            /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
            width: 80%;
            margin: 15px;//item之间相距距离
        }
        .box-item img {
            width: 40%;
            min-width: 400px;
            /*margin-left: 10px;*/
        }
        .text{
            display: flex;
            flex-direction: column;
            width: 60%;
        }
        .text h2{
            font-size: 35px;
            font-weight: bold;
            text-transform: uppercase;
            justify-content: center;
            align-items: center;
            position: relative;
            margin: 10px 20px;
        }
        .text p{
            color: #666666;
            margin: 10px 20px;
        }
        .text li::marker{
            color: rgba(72, 135, 231, 0.7);
        }
        .text .bdli li{
            background: #598df5;
            border-radius: 30px;
            border: 1px solid #eaecee;
            padding: 5px 13px;
            font-size: 15px;
            color: #333;
            margin-top: 20px;
            margin-right: 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 150px;
            flex-wrap: wrap;
        }
        .pain{
            width: 100%;
            background: #efe8e8;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .pain h2{
            font-size: 30px;
            text-align: center;
        }
        .pain-box{
            width: 80%;
            display: flex;
            flex-direction: row;
            align-items: center;
            /*border: solid;*/
        }
        .pb-swiper{
            margin-left: 10px;
            height: 600px;
            width: 90%;
        }
        .pb-text{
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            align-items: center;
            /*border: solid;*/
        }
        .pb-text Ul{
            list-style-type: none;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }
        .pb-text li{
            padding: 25px 20px;
            height: 160px;
            width: 40%;
            background: #fff;
            color: #666666;
            font-size: 15px;
            box-shadow:  0 -1px 15px 0 rgba(0,0,0,.05);
            margin: 10px;
            transition: background-color .4s ease,box-shadow .4s ease;
            /*border: solid;*/
        }
        .pb-text li:hover {
            background-image: url(/img/bgimg.jpg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            color: #fff;
            font-size: 20px;
            transition: 0.3s;
        }
        .func{
            display: flex;
            flex-direction: column;
            width: 100%;
            background-color: #f5f3f3;
            align-items: center;
        }
        .func h2{
            font-size: 30px;
            border-bottom-style: solid;
            border-bottom-color: #f38202;
            border-bottom-left-radius: 2px;
            border-bottom-right-radius: 2px;
            border-bottom-width: 5px;
        }
        .func-item{
            width: 80%;
            display: flex;
            flex-direction: row;
            margin: 15px;//item之间相距距离
        }
        .func img{
            width: 50%;
            height: 500px;
        }
        .func-text span{
            color: #333;
            font-size: 22px;
            font-weight: 700;
            padding-left: 15px;
        }
        .func-text li{
            margin: 15px;//item之间相距距离
        color: #666666;
            flex-wrap: wrap;
        }
    </style>
</head>
<body>
<div class="demoContainer">
    <h1>工厂能量管理系统XMES</h1>
    <div class="box">
        <div class="box-item">
            <div class="text">
                <h2>工厂资源管理</h2>
                <p>对整厂工作站、设备、充放电功率信息管理</p>
                <ul>
                    <li>控制设备到工作站、工作站到整厂电网的最大负载和最大回馈功率，保证工厂用电安全。</li>
                    <li>通过监控整厂、工作站和设备的负载或反馈电网情况，通过智能预测各工站用情况，自动控制充放电设备进行工作。</li>
                    <li>保障设备反馈电量由车间内部使用，防止多余电量反馈到外网，实现经济效益最大化。</li>
                </ul>
                <ul class="bdli">
                    <li>工厂信息</li>
                    <li>通道管理</li>
                    <li>设备管理</li>
                    <li>设备控制</li>
                    <li>工艺信息</li>
                    <li>工步信息</li>
                    <li>安全保障</li>
                    <li>负载回馈优化</li>
                    <li>队列管理·</li>
                </ul>
            </div>
            <img th:src="@{img/func/NMES-1.jpg}"  alt="...">
        </div>
        <div class="box-item">
            <div class="text">
                <h2>能效监控</h2>
                <p>实时监控设备的能耗使用、工作站实时功率情况</p>
                <ul>
                    <li>提供WebAPI\Tcp IP\RS485等通讯方式，实时监控设备的能耗使用情况。根据能耗曲线分析；提供设备、工作站实时能耗趋势变化图表。</li>
                    <li>按设备分组监控设备实时总功率、负载功率、回馈功率和设备的每个通道的工作工步和工艺等信息。</li>
                    <li>实时监控工作站实时总功率、负载总功率、回馈总功率、功率预测范围和功率变化趋势等信息。</li>
                </ul>
                <ul class="bdli">
                    <li>实时监控</li>
                    <li>功率对比</li>
                    <li>设备工作信息</li>
                    <li>耗能图表</li>
                    <li>变化趋势</li>
                    <li>功率预测</li>
                    <li>功率预警</li>
                    <li>能耗可视化报表</li>
                </ul>
            </div>
            <img th:src="@{img/func/NMES-2.jpg}"  alt="...">
        </div>
    </div>
    <div class="pain">
        <h2>解决痛点</h2>
        <div class="pain-box">
            <div class="pb-swiper">
                <div id="carouselExampleInterval" class="carousel slide" data-ride="carousel" data-bs-interval="8000">
                    <div class="carousel-inner" >
                        <div class="carousel-item active">
                            <img th:src="@{img/func/NMES-3.jpg}"  class="pb-swiper"  alt="...">
                        </div>
                        <div class="carousel-item">
                            <img th:src="@{img/solutions/MES_2.jpg}"  class="pb-swiper"  alt="...">
                        </div>
                        <div class="carousel-item">
                            <img th:src="@{img/solutions/MES_3.jpg}"  class="pb-swiper"  alt="...">
                        </div>
                    </div>
<!--                    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">-->
<!--                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>-->
<!--                        <span class="visually-hidden">Previous</span>-->
<!--                    </button>-->
                    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                    </button>
                </div>
            </div>
            <div class="pb-text">
                <ul>
                    <li>
                        <h2>纸质化信息</h2>
                        <p>纸质化信息保存和传递导致数据丢失</p>
                    </li>
                    <li>
                        <h2>信息滞后</h2>
                        <p>品质、产量等信息传递不及时，导致决策延迟</p>
                    </li>
                    <li>
                        <h2>追溯困难</h2>
                        <p>追溯生产品质信息，需要翻查纸质记录</p>
                    </li>
                    <li>
                        <h2>数据失真</h2>
                        <p>人工记录数据，会增加数据不准备的概率</p>
                    </li>
                    <li>
                        <h2>无关键物料追溯</h2>
                        <p>异常品的无法追溯相关物料供应商与生产批次信息</p>
                    </li>
                    <li>
                        <h2>产品拦截困难</h2>
                        <p>在制品、成品批量问题拦截困难</p>
                    </li>
                </ul>
            </div>
            </div>
        </div>
    <div class="func">
        <h1>功能展示</h1>
        <div class="func-item">
            <img th:src="@{img/func/NMES-7.jpg}"  alt="...">
            <div class="func-text">
                <span>用户角色管理</span>
                <ul>
                    <li>管理角色，按角色分配工厂能量平台系统权限</li>
                    <li>管理用户，管理用户登录账号密码、分配用户权限信息。</li>
                </ul>
            </div>
        </div>
        <div class="func-item">
            <img th:src="@{img/func/NMES-4.jpg}"  alt="...">
            <div class="func-text">
                <span>工厂资源管理</span>
                <ul>
                    <li>整厂信息管理：设置整厂的最大负载、最大回馈功率等。</li>
                    <li>工作站管理：一个配电箱可以设定为一个工作站，配置每个工作站的最大负载、最大回馈功率。关联设备信息。</li>
                    <li>设备管理：管理充放电设备信息，设备通道数，充电和放电功率补偿等信息。</li>
                </ul>
            </div>
        </div>
        <div class="func-item">
            <img th:src="@{img/func/NMES-5.jpg}"  alt="...">
            <div class="func-text">
                <span>能耗监控</span>
                <ul>
                    <li>工作站能耗监控：实时动态显示工作站的总功率、负载功率、回馈功率、报警上限、报警下限控制统计图。</li>
                    <li>设备能耗管理：实时动态显示每台设置的总功率、负载功率、回馈功率、预测大值、预测小时控制统计图。</li>
                </ul>
            </div>
        </div>
        <div class="func-item">
            <img th:src="@{img/func/NMES-6.jpg}"  alt="...">
            <div class="func-text">
                <span>生产计划执行</span>
                <ul>
                    <li>通道启动工艺列表：管理设备每个通道的启动工艺列表</li>
                    <li>启动/暂停队列管理：通道自动计算出启动/暂停计划，并按一个的策略自动控制设备执行。</li>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>
</html>